<template>
    <div class="loginContainer">
        <el-button plain type="text" style="position:absolute;left:20px;top:20px;font-size:18px;"
            @click="back">返回</el-button>
        <div class="imgBOX">
            <div class="imgItem">
                <div>1</div>
                <div class="imgLogo"></div>
            </div>

            <div class="imgItem">
                <div>2</div>
                <div :style="{ backgroundImage: `url(${importLogo})` }" class="imgLogos"></div>
            </div>

            <div class="imgItem">
                <div>3</div>
                <div :style="{ backgroundImage: `url(${importLogo3})` }" class="imgLogos"></div>
            </div>

            <div class="imgItem">
                <div>4</div>
                <div :style="{ backgroundImage: `url(${importLogo4})` }" class="imgLogos"></div>
            </div>

            <div class="imgItem">
                <div>5</div>
                <div :style="{ backgroundImage: `url(${importLogo5})` }" class="imgLogos"></div>
            </div>
        </div>

        <div style="返回数据"></div>
    </div>
</template>
<!-- 自定义指令 -->
<script lang="ts" setup>
import Logo from '/@/assets/logo.png'
import { ref, onMounted } from 'vue'

const importLogo = ref(Logo)
const importLogo3 = ref('/scene.jpg')
const importLogo4 = ref('')
const importLogo5 = ref()

onMounted(() => {
    import('/@/assets/logo.png').then((res) => {
        importLogo4.value = res.default
    })
    importLogo5.value = new URL('../assets/logo.png',import.meta.url)
})

const back = async () => {
    window.history.back()
}
</script>
<style lang="scss" scoped>
.loginContainer {
    height: 100vh;
    width: 100vw;
    padding: 60px;
    cursor: pointer;
    box-sizing: border-box;
}

.imgBOX {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.imgItem {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.imgLogo {
    width: 100px;
    height: 100px;
    background: url('/@/assets/logo.png');
    background-size: cover;
}

.imgLogos {
    width: 100px;
    height: 100px;
    background-size: cover;
}
</style>
